<!--
 * @Author: wang 1062637288@qq.com
 * @Date: 2022-12-16 20:32:49
 * @LastEditors: wang 1062637288@qq.com
 * @LastEditTime: 2022-12-17 20:39:29
 * @FilePath: \app\src\pages\search\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view>
        <view class="iot-search_row">
            <input :value="inpValue" placeholder="请输入您要搜索的商品" @input="handleInput" />
            <button @tap="handleCancel" v-if="isFocus">取消</button>
        </view>
        <view class="iot-search_content">
            <navigator :url="'/pages/goods_detail/index?goods_id=' + item.goods_id" class="iot-search_item"
                v-for="(item, index) in goods" :key="item.goods_id">
                {{ item.goods_name }}
            </navigator>
        </view>
    </view>
</template>

<script>
import { request } from '../../request/index.js';

export default {
    data() {
        return {
            goods: [],
            isFocus: false,

            // 输入框的值
            inpValue: '',

            TimeId: -1
        };
    },
    methods: {
        handleInput(e) {
            const { value } = e.detail;
            if (!value.trim()) {

                this.goods = [],
                    this.isFocus = false

                return;
            }
            // 3 准备发送请求获取数据

            this.isFocus = true

            clearTimeout(this.TimeId);
            this.TimeId = setTimeout(() => {
                this.qsearch(value);
            }, 1000);
        },

        // 发送请求获取搜索建议 数据
        async qsearch(query) {
            const res = await request({
                url: '/goods/qsearch',
                data: {
                    query
                }
            });
            console.log(res);

            this.goods = res

        },

        // 点击 取消按钮
        handleCancel() {

            this.inpValue = '',
                this.isFocus = false,
                this.goods = []

        }
    }
};
</script>
<style>
@import './index.css';
</style>
